<template>
  <div class="agvGoodsWrap">
    <!-- <div v-show="messageInfo.left" class="messageBox" :style="{left: (messageInfo.left<50?80:messageInfo.left)+'px', top: messageInfo.top+'px'}">
      <span>{{'设备状态：'+ (messageInfo.location|| 0)}}</span>
      <span>{{'故障信息：'+ (messageInfo.goodsStatus|| '无')}}</span>
    </div> -->
    <div 
      v-for="(item, index) in datas" 
      :key="index" 
      :class="'goodItem goodItem' + item.goodsStatus" 
      @click="openMessageBox(item)"
    >{{goodText[item.goodsStatus]}}</div>
  </div>
</template>

<script>
export default {
  // props: ['datas'],
  data() {
    return {
      goodText: ['空闲', '占用', '分配', '停用',],
      messageInfo: {
        left: 0,
        top: 0,
      },
      datas: [{
				location: "01_01",
				locationDescribe: "1排1列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_02",
				locationDescribe: "1排2列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_03",
				locationDescribe: "1排3列",
				goodsStatus: '0',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_04",
				locationDescribe: "1排4列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_05",
				locationDescribe: "1排5列",
				goodsStatus: '0',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_06",
				locationDescribe: "1排6列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_07",
				locationDescribe: "1排7列",
				goodsStatus: '0',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_08",
				locationDescribe: "1排8列",
				goodsStatus: '3',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_09",
				locationDescribe: "1排9列",
				goodsStatus: '2',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_10",
				locationDescribe: "1排10列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_11",
				locationDescribe: "1排11列",
				goodsStatus: '3',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "01_12",
				locationDescribe: "1排12列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},
      {
				location: "02_01",
				locationDescribe: "2排1列",
				goodsStatus: '2',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_02",
				locationDescribe: "2排2列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_03",
				locationDescribe: "2排3列",
				goodsStatus: '0',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_04",
				locationDescribe: "2排4列",
				goodsStatus: '2',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_05",
				locationDescribe: "2排5列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_06",
				locationDescribe: "2排6列",
				goodsStatus: '3',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_07",
				locationDescribe: "2排7列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_08",
				locationDescribe: "2排8列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_09",
				locationDescribe: "2排9列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_10",
				locationDescribe: "2排10列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_11",
				locationDescribe: "2排11列",
				goodsStatus: '0',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "02_12",
				locationDescribe: "2排12列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},
      {
				location: "03_01",
				locationDescribe: "3排1列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_02",
				locationDescribe: "3排2列",
				goodsStatus: '0',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_03",
				locationDescribe: "3排3列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_04",
				locationDescribe: "3排4列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_05",
				locationDescribe: "3排5列",
				goodsStatus: '2',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_06",
				locationDescribe: "3排6列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_07",
				locationDescribe: "3排7列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_08",
				locationDescribe: "3排8列",
				goodsStatus: '2',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_09",
				locationDescribe: "3排9列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_10",
				locationDescribe: "3排10列",
				goodsStatus: '3',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_11",
				locationDescribe: "3排11列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			},{
				location: "03_12",
				locationDescribe: "3排12列",
				goodsStatus: '1',//  0=空闲,1=载货,2=分配,3=设备占用 
			}]
    }
  },
  methods: {
    openMessageBox(data) {
      console.log(this.messageInfo.location, data)
      if(!this.messageInfo || this.messageInfo.location != data.location) {
        console.log(data.left, data.top)
        this.messageInfo = {...data} 
      }else {
        this.messageInfo = {
          left: 0,
          top: 0,
        }
      }
      
    },
  }
}
</script>

<style lang="scss" scoped>
.agvGoodsWrap{
  // position: relative;
  // background: rgba($color: #000000, $alpha: 0.5);
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 定义12个等宽的列 */
  gap: 4px; /* 为网格项添加间隙 */
	&::after{
		content: '';
		height: 128px;;
		width: 1px;
		border: 2px solid #FFD257;
		position: absolute;
		right: -20px;

	}
  .goodItem{
    // position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    line-height: 40px;
    cursor: pointer;
  }
  .goodItem1{ 
    background: linear-gradient( 90deg, #79A2FF 0%, #4C82FF 100%);
    // box-shadow: 0px 0px 10px 0px rgba(213,225,238,0.4);
    color: #fff;
  }
   .goodItem0{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(232, 234, 236, 0.4);
    color: #fff;
  }
   .goodItem2{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(243, 247, 250, 0.4);
    color: #FA9632;
  }
   .goodItem3{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(227, 232, 238, 0.4);
    color: #F53F3F;
  }
  .messageBox{
    width: 280px;
    height: 100px;
    background: rgba(0,19,102,0.9);
    box-shadow: inset 0px 1px 30px 0px #44D7B6;
    border-radius: 16px;
    border: 1px solid #44D7B6;
    position: absolute;
    z-index: 11;
    padding-left: 20px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    transform: translate(-30%, -100%);
    span{
      margin-bottom: 5px;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>